<template>
	<view class="bgIndex">
		<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex" padding="12rpx"
			activeColor="#785DF6" :size="100" activeLineBg="#785DF6" textAlign="center" activeLineWidth="100%"
			activeDirection="space-between" activeLineHeight="5rpx" bgColor="#fff" :margin="20"
			@change="e=>getChange(e,tabList[e].id)"></sunui-navbar>
		<view class="padding20">


			<view class="search-content ">


				<image class="search-img" :src="search" mode=""></image>
				<input placeholder="请搜索搭子标题" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<view class="buildList " v-for="(item,index) in list" :key="index">
					<view class="flex-end-top " @click.stop="goDeatilFn(item.id)">
						<view class="">
							<image class="orderImg" :src="item.img" mode="aspectFill"></image>
						</view>
						<view class="margin-left_16rpx flex-columna" style="width:454rpx;height: 200rpx;">
							<view class="flex-start-center">
								<view class="topMounted flex" v-if="item.is_top==1">
									<text>顶置</text>
								</view>
								<view class="font-overflow2 font-weight" style="width:100%;margin-left: 6rpx;">
									{{item.title}}
								
								
								</view>
							</view>
							
							<view class=" font-overflow flex-start-center">

								<view class="" v-for="(content,index) in item.labelList" :key="index">
									<!-- <image class="tagImg" src="../../static/第一行所有图标/组合 789.png" mode="aspectFit"></image> -->

									<!-- 		<view class="tagTitlePink flex">
									本地优先
								</view> -->
									<view class="tagTitleOrange  flex">
										{{content}}
									</view>
								</view>
								<!-- <image class="addImg" :src="addicon" mode="aspectFit"></image> -->


							</view>
							<view class="flex-between">

								<view class="flex-start-center">

									<view class="flex-between v-p-share" v-if="item.join_data.length">
										<view class="v-m-width not-font-overflow flex1">
											<block v-for="(img, index) in item.join_data" :key="index">
												<image v-if="index<3" class="pt_img" :src="img.avatar"></image>
											</block>
											<image class="pt_img" :src="headDazi"
												mode=""></image>
										</view>

									</view>

									<view class="" style="color: #9D9D9D;">
										<text class="font-overflow" style="width: 60rpx;">{{item.join_data.length}}人参与</text>
									</view>
								</view>
								<view class="flex-start-center">
									<view v-if="item.status==2" class="flex-column margin-left_20rpx"
										@click.stop="topMountedFn(item)">
										<uni-icons v-if="item.status==2" type="upload" color="#0191ff"
											size="26"></uni-icons>
										<!-- <image class="editImg" :src="edits" mode=""></image> -->
										<text style="color: rgb(1, 145, 255); ;">顶置</text>
									</view>
									<view class="flex-column margin-left_20rpx" @click.stop="Listing(item,3)">
										<uni-icons v-if="item.status==2" type="arrow-down" color="#d40003"
											size="26"></uni-icons>
										<!-- <uni-icons v-if="item.status==3" type=" arrow-up" color="#6DD401" size="24"></uni-icons> -->
										<text v-if="item.status==2" style="color: #d40003; ;">下架</text>
										<!-- <text v-if="item.status==3" style="color:#6DD401; ;">上架中</text> -->
									</view>

									<view v-if="item.status==1||item.status==3||item.status==7||item.status==4"
										class="flex-column margin-left_20rpx" @click.stop.stop="editFn(item)">
										<image class="editImg" :src="edits" mode=""></image>
										<text style="color: rgb(1, 145, 255); ;">编辑</text>
									</view>
									<view v-if="item.status!=5" class="flex-column margin-left_20rpx "
										@click.stop="deletesFn(item)">
										<image class="editImg" :src="deletes" mode=""></image>
										<text style="color:rgb(224, 32, 32);">删除</text>
									</view>
								</view>
							</view>
						</view>

					</view>
					
					<view style="margin-top: 15rpx;width: 100%;">
						<view class="" v-if="(item.status==7)">
							<text style="color: red;">驳回原因：{{item.remark}}</text>
						</view>
						<view class="" v-else>
							<text>发布时间：{{item.create_time}}</text>
						</view>
						<view style="margin-top: 15rpx;width: 100%;" v-if="item.is_top==1">
							<view class=""  >
								<text>顶置过期时间：{{item.top_expire_time}}</text>
							</view>
							
						</view>
						<view class="flex-between " style="margin-top: 20rpx;">
							<view style="color: rgb(1, 145, 255);">
								<text>当前状态：{{item.is_top==0?'未置顶':'置顶中'}}</text>
							</view>
							<view class="flex-start-center">
								<text style="margin-right: 8rpx;">报名截止</text><cc-countdown color="#FFF"
									background-color="#A561FF" splitorColor="#A561FF" :showColon="true" :showDay="true"
									:day="item.expire_timeObject.days" :hour="item.expire_timeObject.hours"
									:minute="item.expire_timeObject.minutes" :second="item.expire_timeObject.seconds"
									@timeup="timeup"></cc-countdown>
							</view>
						</view>
					</view>
					
					<view
						:class="item.status==4?'orderStatused flex': item.status==7?'orderStatusRed flex':'orderStatus flex' ">
						<text>{{orderStatusFn(item.status)}}</text>
					</view>
				</view>
			</mescroll-body>

			<view class="height50">

			</view>
			<view class="PublishTag flex" @click="PublishTagFn()">
				发布搭子
			</view>
		</view>
		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>请选择置顶天数</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="clear" size="30"
							style="color: #07070791;">
						</uni-icons>
					</view>
					<view class="flex">
						<text class="font-size_56rpx"
							style="color: #6A68F7;">{{Math.floor(dazi_top_price * 100) / 100}}</text>
						<text style="margin-left: 10rpx;color: #6A68F7;">{{currency_name}}</text>
					</view>
					<view class="card">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" @input="changeInputTop" type="number" v-model="day"
									placeholder="输入置顶天数" />
							</view>


						</view>

					</view>

				
					<view class="PublishTags flex" @click="payNow()">
						立即支付
					</view>

				</view>

			</template>
		</sunui-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				day: '',
				dazi_top_price: '',
				currency_name: uni.getStorageSync("system").currency_name,
				deletes: this.$img.delete,
				edits: this.$img.edit,
				addicon: this.$img.addicon,
				search: this.$img.search,
				headDazi:this.$img.headDazi,
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				list: [],
				windowHeight: 0,
				currentIndex: 0,
				searchVal: '',
				status: 0,

				tabList: [{
					name: '全部',
					id: '0' //null
				}, {
					name: '待审核',
					id: '1' //null
				}, {
					name: '上架中',
					id: '2' //null
				}, {
					name: '下架',
					id: '3' //null
				}, {
					name: '过期',
					id: '4' //null
				}, {
					name: '完成',
					id: '5' //null
				}, {
					name: '驳回',
					id: '7' //null
				}, ],
				detailInfo: [],
				payAmountList: [],
				currentIndexs: 0,
				rechargeObject: {},
				basicConfiguration: {},
				topId: ''


			}
		},
		onLoad() {

			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
			this.configFn()
			// this.payAmountFn()
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
			})
		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {

						var numberStr = num.toString();
						return numberStr.replace(/(\.0+|0+)$/, '');
						// num.toString();


					}
				};
			},
			// 订单状态 '1 待审核 2 上架中 3 下架 4 驳回',
			orderStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '全部' : status == 1 ? '待审核' : status == 2 ? '上架中' : status == 3 ? '下架' :
						status == 4 ? '过期' : status == 5 ? "完成" : status == 6 ? '删除' : '驳回';

					return orderStatus;
				};
			},
		},
		methods: {
			payNow() {
				if (this.day) {
					uni.showModal({
						title: '提示',
						content: '是否确定要支付',
						success: async (res) => {
							if (res.confirm) {

								const result = await this.$http.post({
									url: this.$api.top,
									data: {
										id: this.topId,
										day: this.day


									},
									headers: {
										'Authorization': this.userInfo.token
									}

								})
								if (result.code == 0) {

									this.$sun.toast(result.message, 'none')
									this.$refs.serviceItemsPopup.close()
									setTimeout(() => {
										this.mescroll?.resetUpScroll();
									}, 500)

								} else {
                                     this.$refs.serviceItemsPopup.close()
									this.$sun.toast(result.message, 'none')
								}
							} else if (res.cancel) {
                                 this.$refs.serviceItemsPopup.close()
                                 setTimeout(() => {
                                 	this.mescroll?.resetUpScroll();
                                 }, 500)
                                 
							}
						}
					});
				} else {
					this.$sun.toast('请填写置顶天数在支付', 'none')
				}

			},
			changeInputTop(e) {
				console.log(e)
				if (e.detail.value) {
					this.dazi_top_price = e.detail.value * this.basicConfiguration.dazi_top_price
				} else {
					this.dazi_top_price = this.basicConfiguration.dazi_top_price
				}
			},
			async configFn() {
				const res = await this.$http.post({
					url: this.$api.config,
					data: {

					},

				})
				console.log(res)
				if (res.code == 0) {
					this.basicConfiguration = res.data
					this.dazi_top_price = this.basicConfiguration.dazi_top_price
					wx.setStorageSync('system', res.data);

				}
			},
			switchRechargePrice(index, item) {

				this.currentIndexs = index,
					this.rechargeObject = item

			},
			topMountedFn(item) {
				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已被拉黑', 'none')
				}else{
					this.topId = item.id
					this.$refs.serviceItemsPopup.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: false, //false使用户不能点击其它关闭页面
						topclose: false,
						zIndex: 99999
					});
				}
			},
			async payAmountFn() {
				const result = await this.$http.post({
					url: this.$api.payAmount,
					data: {




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (result.code == 0) {
					console.log('data', result.data);

					if (result.data.list.length) {
						this.rechargeObject = result.data.list[0]
						this.payAmountList = result.data.list
					}

				} else {
					this.$sun.toast(result.message)
				}
			},
			goDeatilFn(id) {

				console.log(id)
				this.$sun.navGo('/pagesB/index/buildSubDetail', {
					id: id
				})
			},
			PublishTagFn() {

				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已被拉黑', 'none')
				}else{
					if (uni.getStorageSync("userInfo").real_name||(!Number(this.basicConfiguration.isOpen_idCard_authentication)) ) {
						this.$sun.navGo('/pagesA/personalCenter/PublishTag')
					} else {
						this.$sun.toast('请实名以后在发布搭子', 'none')
					
						setTimeout(() => {
							this.$sun.navGo('/pagesA/personalCenter/informationIdCard')
					
						}, 1000)
					}
				}



			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			editFn(item) {
				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已被拉黑','none')
				}else{
					console.log(item)
					
					
					
					this.$sun.navGo('/pagesA/personalCenter/PublishTag', {
						...item
					})
				}

			},
			async deletesFn(item) {
				// 掉接口
				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已被拉黑','none')
					
				}else{
					uni.showModal({
						title: '提示',
						content: '是否删除' + item.name + '搭子',
						success: async (res) => {
							if (res.confirm) {
					
								const result = await this.$http.post({
									url: this.$api.updateDaziStatus,
									data: {
										status: 6,
										id: item.id,
					
					
									},
									headers: {
										'Authorization': this.userInfo.token
									}
					
								})
								if (result.code == 0) {
					
									this.$sun.toast(result.message, 'none')
					
									setTimeout(() => {
										this.mescroll?.resetUpScroll();
									}, 500)
					
								} else {
					
									this.$sun.toast(result.message, 'none')
								}
							} else if (res.cancel) {
					
							}
						}
					});
				}
			},
			getChange(index, id) {
				console.log(id)
				this.status = id
				this.currentIndex = index
				this.$nextTick(() => {
					this.mescroll?.resetUpScroll();
				})

			},

			formatTimeDifference(timestamp) {
				// 获取当前时间的时间戳（以秒为单位）
				const currentTimestamp = Math.floor(Date.now() / 1000);

				// 计算时间差（以秒为单位）
				let timeDifference = timestamp - currentTimestamp;

				// 计算天数
				const days = Math.floor(timeDifference / (24 * 60 * 60));
				timeDifference %= (24 * 60 * 60);

				// 计算小时
				const hours = Math.floor(timeDifference / (60 * 60));
				timeDifference %= (60 * 60);

				// 计算分钟
				const minutes = Math.floor(timeDifference / 60);

				// 剩余的秒数
				const seconds = timeDifference % 60;

				return {
					days: days,
					hours: hours,
					minutes: minutes,
					seconds: seconds
				};
			},

			async Listing(item, status) {
				if(this.userInfo.disable==0){
					this.$sun.toast('该用户已经被拉黑', 'none')
				}else{
					console.log(item)
					if (item.join_data.length) {
						this.$sun.toast('当前搭子还有参加人员请踢掉所有人方可下架', 'none')
					} else {
						// 掉接口
						uni.showModal({
							title: '提示',
							content: '是否下架' + item.name + '搭子',
							success: async (res) => {
								if (res.confirm) {
					
									const result = await this.$http.post({
										url: this.$api.updateDaziStatus,
										data: {
											status: status,
											id: item.id,
					
					
										},
										headers: {
											'Authorization': this.userInfo.token
										}
					
									})
									if (result.code == 0) {
					
										this.$sun.toast(result.message, 'none')
					
										setTimeout(() => {
											this.mescroll?.resetUpScroll();
										}, 500)
					
									} else {
					
										this.$sun.toast(result.message, 'none')
									}
								} else if (res.cancel) {
					
								}
							}
						});
					
					
					}
				}
			},
			// 关闭购物弹层
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()

			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.daziList,
					data: {
						page: scroll.num,
						limit: 10,
						is_oneself_uid: this.userInfo.id,
						status: this.status,
						title: this.searchVal

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list);

					this.list.forEach((item) => {
						item.expire_timeObject = this.formatTimeDifference(item.expire_time)
						item.labelList = item.label.split(",")
					})



					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
		}
	}
</script>

<style lang="less" scoped>
	.bgIndex {

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 100%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}


			


			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			// margin: 20rpx;
			height: 76rpx;

			background: rgb(255, 255, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.buildList {
			
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 20rpx;
			background: rgb(255, 255, 255);
			margin-top: 20rpx;
			border-radius: 20rpx;
 .topMounted {
                    	
                    	width: 75rpx;
                    	height: 36rpx;
                    	border-radius: 12rpx;
                    	color: #fff;
                    	background: rgb(1, 145, 255);
                    	margin-right: 5rpx;
                    }
			.orderStatus {
				position: absolute;
				right: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				color: #fff;
				background: rgb(120, 93, 246);
			}

			.orderStatusRed {
				position: absolute;
				right: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				color: #ffffff;
				background: rgb(255, 0, 0);
			}

			.orderStatused {
				position: absolute;
				right: 0;
				top: 0;
				width: 106rpx;
				height: 48rpx;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				color: #999999;
				background: rgb(236, 235, 235);
			}

			.tagImg {
				width: 118rpx;
				height: 38rpx;
			}

			.addImg {
				width: 30.02rpx;
				height: 30.02rpx;
			}

			.tagTitle {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: rgb(0, 198, 141);
				background: rgb(212, 255, 249);
				margin-right: 5rpx;
			}

			.avaterImg {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.tagTitleGay {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: #666666;
				background: #F5F5F5;
				margin-right: 5rpx;
			}

			.tagTitleOrange {
				padding: 10rpx 20rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: rgb(238, 100, 41);
				background: rgba(238, 100, 41, 0.13);
				;
				margin-right: 5rpx;
			}

			.tagTitlePink {
				width: 116rpx;
				height: 36rpx;
				border-radius: 12rpx 12rpx 24rpx 12rpx;
				font-size: 20rpx;
				color: #F95CEF;
				background: #FFF2F8;
				margin-right: 5rpx;
			}

			.location {
				width: 110rpx;
				height: 48rpx;
				border-radius: 20rpx;

				background: rgb(235, 245, 255);
			}

			.v-p-share {
				padding: 2rpx 2rpx 0 2rpx;

				.v-m-width {
					margin-right: 40rpx;

					.pt_img {
						width: 50rpx;
						height: 50rpx;
						margin-right: -25rpx;
						border-radius: 50%;
					}
				}

				.v-share-friend {
					text {
						color: #294d7d;
						font-size: 24rpx;
						padding-right: 50rpx;
					}

					view {
						color: #ffffff;
						width: 154rpx;
						height: 58rpx;
					}
				}

				.v-share-friend2 {
					text {
						color: #294d7d;
						font-size: 24rpx;
					}
				}
			}

			.editImg {
				width: 20px;
				height: 20px;
				margin-bottom: 8rpx;
			}

			.orderImg {
				width: 192rpx;
				height: 192rpx;
				border-radius: 30rpx;


			}

			.addressImg {
				width: 28.5rpx;
				height: 28.12rpx;
			}
		}

		.PublishTags {
			z-index: 99;
			margin-top: 10rpx;
			height: 102rpx;
			border-radius: 142rpx;
			color: #fff;


			bottom: 20rpx;
			background: rgb(120, 93, 246);
		}

		.PublishTag {
			z-index: 99;
			width: 95%;
			height: 102rpx;
			border-radius: 142rpx;
			color: #fff;
			position: fixed;

			bottom: 20rpx;
			background: rgb(120, 93, 246);
		}

	}
</style>